{include file="public/_header.html"}

<body style="margin:0px; padding:0px;">


<div id="main-body"></div>
<div id="outer" style="width:300px; margin:0px; padding:0px;">
<table class="border2" style="width: 100%;" cellpadding="4" cellspacing="0">
<tr>
	<td>
	<table style="width: 100%;" class="mainmenu5" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td width="7"><img src="design/pic/spacer.gif" class="sqr1" alt="" height="7" width="7" /></td>
		<td class="block_header">{language text='Mod_Chat.instant_messenger'}</td>
	</tr>
	</table>
	<div id="check_messages" style="display:none;"></div>
	<table id="user_details">
	<tr>
		<td style="vertical-align:top;">
		{Account::Avatar sUser=$sUser iSize=60 class="pic1" onmouseover="showInfo5('`$sUser`', '', '');this.className='pic2';" onmouseout="this.className='pic1';return nd();"}
		</td>
		<td style="vertical-align:top; font-size:9pt;">
			<a href="javascript:void(0);" style="cursor:pointer;" class="hidClass" onmouseover="showInfo5('{language text='Mod_Chat.change_your_status'}', '', '');" onmouseout="return nd();" onclick="document.getElementById('user_status').style.display='';">{$sUser} {if $sCurrent}(<span id="live_status">{$sCurrent}</span>){else}<span id="live_status"></span>{/if}</a>
			<div style="position:relative;">
			<div id="user_status" style="padding:5px; position:absolute; display:none;" class="border2 hidClass">
			<div class="border13" style="padding:5px;{if !$sCurrent} width:110px;{/if}">
				{foreach from=$aOptions item=aVar}
				<div><a href="javascript:void(0);" style="cursor:pointer;" onclick="document.getElementById('user_status').style.display='none'; document.getElementById('live_status').innerHTML='{if $sCurrent}{$aVar.name}{else}({$aVar.name}){/if}'; xajax_changeImStatus('{$aVar.key}');"><span id="status{$aVar.key}">{$aVar.name}</span></a></div>
				{/foreach}
			</div>
			</div>
			</div>
		</td>
	</tr>
	</table>
	
	<div style="font-size:8pt;">
		[ <a href="javascript:void(0);" style="cursor:pointer;" class="hidClass" onclick="sId('user_setting').style.display='';">Settings</a> ] <span id="settings_saved" style="display:none; background:#73C350; color:#fff;">Saved</span>
		<div style="position:relative;">
		<div id="user_setting" style="padding:5px; position:absolute; display:none;" class="border2 hidClass">
			On a new chat event (New Message, Request etc...) we should:
			<div style="padding:5px;">
				<label><input type="radio" name="msg_event" onclick="sId('user_setting').style.display='none'; xajax_saveUserSetting(0);" style="vertical-align:middle; border:0px;"{if !$bImSetting}checked{/if} /> play a beep</label> <br />
				<!-- <label><input type="radio" name="msg_event" onclick="sId('user_setting').style.display='none'; xajax_saveUserSetting(1);" style="vertical-align:middle; border:0px;"{if $bImSetting == '1'}checked{/if} /> focus window</label> <br /> -->
				<label><input type="radio" name="msg_event" onclick="sId('user_setting').style.display='none'; xajax_saveUserSetting(2);" style="vertical-align:middle; border:0px;"{if $bImSetting == '2'}checked{/if} /> do nothing</label> <br />
			</div>
		</div>
		</div>
	</div>
	
	</td>
</tr>
<tr>
	<td>

	<table style="width: 100%;" class="mainmenu5" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td width="7"><img src="design/pic/spacer.gif" class="sqr1" alt="" height="7" width="7" /></td>
		<td class="block_header">{language text='Mod_Chat.friends_online'}</td>
	</tr>
	</table>

	<div style="padding:5px;">

	<table style="padding-bottom:4px;">
	<tr>
		<td style="vertical-align:middle;">{language text='Mod_Chat.user_name'}:</td>
		{literal}
		<td style="vertical-align:middle;"><input type="text" name="username" value="" size="20" style="width:140px;" onkeyup="xajax_searchFriends(this.value, 'search_box');" autocomplete="off" />
		{/literal}
		<div style="position:relative;">
			<div id="search_box" style="position:absolute; display:none; width:140px;" class="border2 hidClass">
			</div>
		</div>
		</td>
	</tr>
	</table>

	<div class="border2" style="height:400px; overflow:auto; width:98%;">
		<div id="whos_online"></div>
	</div>
	</div>

	</td>
</tr>
</table>

<br />
<input type="hidden" name="page_num" id="page_num" value="0" />
<script type="text/javascript">xajax_updateUsersOnline();</script>
<script type="text/javascript">xajax_getUsersOnline(document.getElementById('page_num').value);</script>
<script type="text/javascript">xajax_checkMessages();</script>
</div>
<div id="div_sound"></div>
</body>
</html>